
gs-date input,
gs-text input,
gs-search input,
gs-number input,
gs-memo input,
gs-combo input,
gs-time input,
gs-select select,
gs-interval input,
gs-memo textarea {
    width: 100%;
    font-size: 1em;
    font-family: inherit;
    
    -webkit-appearance: none;
    -moz-appearance: none;
    
    -webkit-border-radius: inherit;
    /*-moz-border-radius: none;*/
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    
    line-height: 1.2em;
    
    background-color: white;
    color: black;
    
    padding: 0;
    border: none;
    margin: 0;
    
    border-radius: 0;
}

gs-memo textarea {
    display: block;
    
    width: 100% !important;
    /*
        this prevents the textarea from being resized to become too wide or too tall for it's container.
        the important flag is required because in Google Chrome (I don't know about other browsers) the browser uses the "style" attribute to set the width/height when resizing the textarea, this means that in order to get precedence you need to use !important.
    */
}


gs-date,
gs-text,
gs-search,
gs-number,
gs-memo,
gs-combo,
gs-time,
gs-select,
gs-interval,
gs-memo,
gs-checkbox,
gs-datetime {
    position: relative;
    display: block;
    
    background-color: white;
    color: black;
    
    padding: 0.25em;
    border: none;
    margin: 0.25em;
    
    border-radius: 0;
    
    min-height: 1em;
    line-height: 1.2em;
    font-size: 1em;
    
    /*box-shadow: 0 0.3em 0.5em -0.125em rgba(0,0,0,.1), 0 0.2em 0.5em 0 rgba(0,0,0,.14), 0 0.0625em 0.3125em 0 rgba(0,0,0);*/
    /*box-shadow: 0 0 0.1em 0 rgba(0,0,0,.1), 0 0 0.2em 0 rgba(0,0,0,.2);*/
    box-shadow: 0 0 0.1em 0 rgba(0,0,0,.2), 0 0 0.2em 0 rgba(0,0,0,.4);
    transition: box-shadow 0.5s;
}

gs-date.hover,
gs-text.hover,
gs-search.hover,
gs-number.hover,
gs-memo.hover,
gs-combo.hover,
gs-time.hover,
gs-select.hover,
gs-interval.hover,
gs-memo.hover,
gs-checkbox.hover,
gs-datetime.hover {
    
    /*box-shadow: 0 0.3em 0.5em -0.125em rgba(0,0,0,.1), 0 0.2em 0.5em 0 rgba(0,0,0,.14), 0 0.0625em 0.3125em 0 rgba(0,0,0);*/
    /*box-shadow: 0.3em 0.3em 0.1em 0 rgba(0,0,0,.1), 0 0 0.2em 0 rgba(0,0,0,.2);*/
    box-shadow: 0.3em 0.3em 0.1em 0 rgba(0,0,0,.2), 0 0 0.2em 0 rgba(0,0,0,.4);
    transition: box-shadow 0.5s;
}

gs-date[disabled],
gs-text[disabled],
gs-search[disabled],
gs-number[disabled],
gs-memo[disabled],
gs-combo[disabled],
gs-time[disabled],
gs-select[disabled],
gs-interval[disabled],
gs-memo[disabled],
gs-checkbox[disabled],
gs-datetime[disabled] {
    pointer-events: auto;
    
    opacity: 0.6;
}

gs-date.focus,
gs-text.focus,
gs-search.focus,
gs-number.focus,
gs-memo.focus,
gs-combo.focus,
gs-time.focus,
gs-select.focus,
gs-interval.focus,
gs-memo.focus,
gs-checkbox.focus,
gs-datetime.focus {
    
    /*box-shadow: 0 0.3em 0.5em -0.125em rgba(230,138,84,.1), 0 0.2em 0.5em 0 rgba(230,138,84,.14), 0 0.0625em 0.3125em 0 rgba(230,138,84,.12);*/
    /*box-shadow: 0.3em 0.3em 0.1em 0 rgba(230,138,84,.25), 0 0 0.2em 0 rgba(230,138,84,.5);*/
    box-shadow: 0.3em 0.3em 0.1em 0 rgba(230,138,84,.5), 0 0 0.2em 0 rgba(230,138,84,1);
    transition: box-shadow 0.5s;
}


gs-date[mini],
gs-text[mini],
gs-search[mini],
gs-number[mini],
gs-memo[mini],
gs-combo[mini],
gs-time[mini],
gs-select[mini],
gs-interval[mini],
gs-memo[mini],
gs-checkbox[mini],
gs-datetime[mini] {
    background-color: transparent;
    box-shadow: none !important;
}

gs-date[mini] input,
gs-text[mini] input,
gs-search[mini] input,
gs-number[mini] input,
gs-memo[mini] input,
gs-combo[mini] input,
gs-time[mini] input,
gs-select[mini] select,
gs-interval[mini] input,
gs-memo[mini] textarea {
    background-color: transparent;
    box-shadow: none !important;
}





























